<template>
  <div class="page">
    <div class="J-integral-show">
      <div class="integral-list">
        <div class="weui-flex pl line-bottom">
          <div class="weui-flex__item">
              <div class="record_">
                <div class="font-14">订单编号: &nbsp;&nbsp;{{integralShow.order_no}}</div>
              </div>
              <div class="record_" v-if="integralShow.type == '0'">
                <div class="font-14">积分名称: <span class="color-1">{{integralShow.tips}}</span></div>
              </div>
              <div class="record_" v-if="integralShow.type == '0'">
                <div class="font-14">积分余额: <span class="color-3">{{integralShow.balance}}</span>
                  &emsp;&emsp;上次余额: <span class="color-3">{{integralShow.last_balance}}</span></div>
              </div>
              <div class="record_">
                <div>{{integralShow.type == '2'?'兑换时间':'积分时间'}}：<span class="color-2">{{integralShow.createTime}}</span></div>
              </div>
              <div class="record_" v-if="integralShow.type == 2">
                <div class="font-14">兑换站点：{{integralShow.gs_name || ''}}</div>
              </div>
          </div>
        </div>
      </div>
      <div class="integral-show" v-if="integralShow.type == '2'">
        <div class="weui-flex pl line-bottom" v-for="item in integralShow.goodsItemList">
          <div class="img">
            <img :src="item.galleryUrlPath?api+item.galleryUrlPath:nopic" />
          </div>
          <div class="weui-flex__item">
            <div class="name">{{item.galleryName}}<span class="price color-3 font-12">￥8</span></div>
            <div class="info font-12"><span class="fl color-1">{{item.needBonus}}积分</span><span class="fr">x{{item.number}}</span></div>
          </div>
        </div>
      </div>
      <div class="integral-qr" v-if="integralShow.type == '2'">
        <div class="qr"><img :src="api+integralShow.qrcode_url" /></div>
        <div class="qr-tis color-2">到指定油站出示二维码即可完成兑换</div>
      </div>
    </div>
  </div>
</template>
<script>
  const config = require('~src/config')
  import { mapGetters } from 'vuex'
  export default {
    name: 'integral-list',
    data () {
      return {
        api: config._API_,
        sid: this.$route.query.sid,
        mid: this.$route.query.id,
        nopic: config._URL_ + '/static/images/nopic.png',
      }
    },
    components: {
    },
    computed: {
      ...mapGetters({
        integralShow: 'getIntegralshow'
      }),
      gsName () {
        return this.integralShow.exchange_order_info
      }
    },
    mounted () {
      var _this = this
      if (_this.integralShow){
        var config = {
           sid: _this.sid,
           mid: _this.mid
        }
        _this.$store.dispatch('getIntegralshow', config)
      }
    },
    methods: {
    }
  }
</script>
<style lang="scss">
  .integral-list{
    background-color:#fff;
    .weui-flex__item:after{
      bottom:-10px;
    }
    .weui-flex{
      padding:10px;
    }
    .record_{
      overflow: hidden;
      font-size: 14px;
      margin-top:4px;
    }
  }
  .integral-qr{
    background-color:#fff;
    padding:20px 0 10px 0;
    .qr{
      width:120px;
      height:120px;
      background-color:#eee;
      margin:0 auto;
      img{
        width:120px;
        height:120px;
      }
    }
    .qr-tis{
      text-align: center;
      line-height:30px;
      font-size:12px;
    }
  }
  .integral-show{
    .weui-flex{
      padding:10px;
      background-color:#fff;
      .weui-flex__item{
        .name{
          margin-top:3px;
          font-size:14px;
        }
        .price{
          margin-left:15px;
        }
        .info{
          margin-top:3px;
        }
      }
    }
    .img{
      width:60px;
      height:60px;
      margin-right:10px;
      img{
        width:60px;
        height:60px;
      }
    }
  }
</style>
